<script setup>
import { ref } from 'vue'
import MonthCom from '@/views/work/component/month.vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import dayjs from 'dayjs'
import { useLoginUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
const { loginUserInfo } = storeToRefs(useLoginUserStore())
const router = useRouter()
//返回上一级
const onBackClick = () => {
  router.go(-1)
}
//接收日期组件数据方法
const work_time_month = ref(dayjs().format('YYYY-MM'))
const workloadList = ref([])

const getWorkList = () => {
  request({
    url: '/workloads/list',
    method: 'get',
    params: {
      userId: loginUserInfo.value.id,
      year: dayjs(work_time_month.value).format('YYYY'),
      month: dayjs(work_time_month.value).format('MM')
    }
  }).then((res) => {
    workloadList.value = res.data
  })
}
getWorkList()

const onChangeTime = (newTime) => {
  work_time_month.value = newTime
  getWorkList()
}
</script>
<template>
  <div class="user_homepage">
    <nut-navbar class="homepage_navbar" left-show @click-back="onBackClick">
      <template #left>
        <div>工作量记录</div>
      </template>
    </nut-navbar>
    <MonthCom :work_time_month="work_time_month" @onChangeTime="onChangeTime" />
    <el-table :data="workloadList" stripe height="450" style="width: 100%">
      <el-table-column type="index" width="80" label="序号" align="center" />
      <el-table-column prop="committedWorkloads" label="工作量" align="center" />
      <el-table-column prop="submissionDate" label="时间" align="center" />
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.user_homepage {
  .homepage_navbar {
    :deep(.nut-navbar__left) {
      padding: 0px;
      font-size: 16px;
      color: #3b3b3b !important;
    }
    :deep(.nut-icon-left) {
      color: #3b3b3b !important;
    }
  }
  .homepage_group {
    .unity {
      display: flex;
      justify-content: space-between;
    }
    .uesr_img {
      .user_left_title {
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
